<!--
 * @Descripttion: 文件说明
 * @version: 0.0.1
 * @Author: gaojiapeng
 * @Date: 2021-02-18 07:58:07
 * @LastEditors: gaojiapeng
 * @LastEditTime: 2021-04-13 16:50:24
-->
<template>
  <div class="messageList" >
      <div id="chartDL" style="height: 100%;width: 100%"></div>
  </div>
</template>
<script>
import icon from "./image/icon_andon.png";
import * as echarts from 'echarts';
import { Getmachine_plc_realdata } from "@/api";
export default {
  data() {
    return {
      icon,
      value: 0,
      MyChart: null,
      title: ["1#电流", "2#电流", "3#电流"],
      datelist: [],
      timer: null,
      deviceId: '1600336287679365121',//设备编码
      currentCount :120, // 电流存储的容量
      currentlistAll :[], // 电流存储的数据信息
      currentList :[], // 电流存储的数据信息
      Currenttimer :5000, // 电流存储的数据信息刷新时间
      Currentlist1 :[], // 电流存储的数据信息1
      Currentlist2 :[], // 电流存储的数据信息2
      Currentlist3 :[], // 电流存储的数据信息3
    };
  },
  mounted() {
    this.getChart()
    this.getdata()
    this.timer = setInterval(() => {
      this.SetCurrent()
      this.getdata()
    }, this.Currenttimer);
  },
  methods: {
    getChart() {
     var option = {
        title: {
          text: "",
          textStyle: {
            color: "#ccc",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: this.title,
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          top: "middle",
          left: "3%",
          right: "4%",
          bottom: "3%",
          height: "80%",
          containLabel: true,
        },
        toolbox: {
          show: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.datelist,
            axisTick: {
              show: true, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ebf8ac", //X轴文字颜色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            nameTextStyle: {
              color: "#ebf8ac",
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ebf8ac",
              },
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#DDD",
              },
            },
          },
        ],
        series: [
          {
            name: this.title[0],
            showSymbol: false,
            type: "line",
            min: 10,
            max: 40,
            data: this.Currentlist1,
            lineStyle: {
              normal: {
                show: false,
                width: 3,
                color: {
                  type: "linear",
                  colorStops: [
                    {
                      offset: 0,
                      color: "#7CF7FF", // 0% 处的颜色
                    },
                    {
                      offset: 0.4,
                      color: "#4B73FF", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#4B73FF", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
                shadowColor: "rgba(71,216,190, 0.5)",
                shadowBlur: 10,
                shadowOffsetY: 7,
              },
            },
            itemStyle: {
              normal: {
                color: "#4B73FF",
                borderWidth: 2,
                borderColor: "#4B73FF",
              },
            },
            smooth: true,
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            name: this.title[1],
            showSymbol: false,
            type: "line",
            min: 10,
            max: 40,
            data: this.Currentlist2,
            lineStyle: {
              normal: {
                width: 3,
                color: {
                  type: "linear",

                  colorStops: [
                    {
                      offset: 0,
                      color: "#00F2FC", // 0% 处的颜色
                    },
                    {
                      offset: 0.4,
                      color: "#00F2FC", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#00F2FC", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
                shadowColor: "rgba(249,165,137, 0.5)",
                shadowBlur: 10,
                shadowOffsetY: 7,
              },
            },
            itemStyle: {
              normal: {
                color: "#F6D06F",
                borderWidth: 2,
                /*shadowColor: 'rgba(72,216,191, 0.3)',
                           shadowBlur: 100,*/
                borderColor: "#F6D06F",
              },
            },
            smooth: true,
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            name: this.title[2],
            showSymbol: false,
            type: "line",
            min: 10,
            max: 40,
            data: this.Currentlist3,
            lineStyle: {
              normal: {
                width: 3,
                color: {
                  type: "linear",
                  colorStops: [
                    {
                      offset: 0,
                      color: "#25FC9D", // 0% 处的颜色
                    },
                    {
                      offset: 0.4,
                      color: "#25FC9D", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#25FC9D", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
                shadowColor: "rgba(249,165,137, 0.5)",
                shadowBlur: 10,
                shadowOffsetY: 7,
              },
            },
            itemStyle: {
              normal: {
                color: "#25FC9D",
                borderWidth: 2,
                /*shadowColor: 'rgba(72,216,191, 0.3)',
                           shadowBlur: 100,*/
                borderColor: "#25FC9D",
              },
            },
            smooth: true,
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          }
        ],
      };
      if (this.myChart != null && this.myChart!=="" && this.myChart!== undefined) {
        this.myChart.setOption(option)
      }else{
        this.myChart = echarts.init(document.getElementById('chartDL'))
        this.myChart.setOption(option)
      }
    },
    getdata(){
      if (localStorage.getItem('Currentlist')) {
        this.currentlistAll = JSON.parse(localStorage.getItem('Currentlist'))
      }
      this.Currentlist1 =  [0]
      this.Currentlist2 =  [0]
      this.Currentlist3 =  [0]
      this.datelist = []
      for (let i = 0; i<this.currentlistAll.length;i++) {
       var Currentlistitem = this.currentlistAll[i].filter(item=>item.key === this.title[0])
        if (Currentlistitem.length>0){
          this.Currentlist1.push(Currentlistitem[0].value)
        }
        Currentlistitem = this.currentlistAll[i].filter(item=>item.key === this.title[1])
        if (Currentlistitem.length>0){
          this.Currentlist2.push(Currentlistitem[0].value)
        }
        Currentlistitem = this.currentlistAll[i].filter(item=>item.key === this.title[2])
        if (Currentlistitem.length>0){
          this.Currentlist3.push(Currentlistitem[0].value)
        }
        this.datelist.push(this.formatDateHMS(new Date(this.currentlistAll[i][0].date)))
      }
      this.getChart()
    },
    /* 时间格式 */
    formatDateHMS (val) {
      var date = this.$moment(val).format('HH:mm:ss')
      return date
    },
    groupBy(array, f) {
      let groups = {};
      array.forEach(function(o) {
        let group = JSON.stringify(f(o));
        groups[group] = groups[group] || [];
        groups[group].push(o);
      });
      return Object.keys(groups).map(function(group) {
        return groups[group];
      });
    },
    // 存储电流数据
    SetCurrent(){
      // 获取
      Getmachine_plc_realdata(this.deviceId).then(res => {
        if (localStorage.getItem('Currentlist')) {
          this.currentList = JSON.parse(localStorage.getItem('Currentlist'))
        }
        if (res.data.data!==null&&res.data.data!==undefined) {
          var datalist =res.data.data.filter(item=> item.key.includes('#电流'))
          var itemlist = []
          var date = new Date(Date.now())
          for (let i = 0;i <datalist.length;i++) {
            itemlist.push({'key':datalist[i].key,'value':datalist[i].value,'date':date })
          }
          if (this.currentList.length>=this.currentCount){
            this.currentList.splice(0, 1);
          } this.currentList.push(itemlist)

          localStorage.setItem('Currentlist', JSON.stringify(this.currentList))
        }
      }).catch(() => {
      })
    }
  },
  destroyed() {
    // 清理定时器
    clearTimeout(this.timer)
    this.timer = null
  }
};
</script>
<style lang="scss" scoped>
.messageList {
  height: 100%;
  width: 100%;
  display: flex;
  .left {
    flex: 0.4;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .right {
    flex: 0.6;
    .top {
      height: 50%;
      display: flex;
      align-items: flex-end;
      .value {
        font-size: 4rem;
        color: #f97f01;
        font-family: numberFont;
      }
      .unit {
        margin-left: 10px;
        font-size: 1.6rem;
        color: #bbbbbb;
      }
    }
    .bottom {
      height: 50%;
      font-size: 1.6rem;
      color: #a8adbf;
      line-height: 30px;
      display: flex;
      align-items: flex-start;
    }
  }
}
</style>
